<template>
  <div>
    <div class="node" v-has="{action: 'iot:pile:gun:list', effect: 'move'}">
    <div :class="[$style.search_box, $style.topSelect]">
      <div :class="$style.selectBox">
            <label>请选择：</label>
            <el-select v-model="searchs.site" clearable @change="changeSite(1)" placeholder="站点">
              <el-option
                v-for="item in siteList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="searchs.pile" clearable @change="getGun" placeholder="选择桩">
              <el-option
                v-for="item in pileList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
       </div>
      <SearchInput
        placeholder="充电枪编号"
        label="充电枪编号"
        style="margin:0 17px"
        :value="searchs.sn"
        :onChange="(val) => changeSearch('sn',val)"
        :onBlur="getGun"
      />
      <SearchInput
        placeholder="车位号"
        label="车位号"
        style="margin-right:20px"
        :value="searchs.name"
        :onChange="(val) => changeSearch('name',val)"
        :onBlur="getGun"
      />
      <div :class="$style.searchBox1" style="margin-left: 20px">
        <el-button  size="small" plain  icon="el-icon-search" @click="getGun">查询</el-button>        
      </div>
    </div>
    <Panel title="充电枪管理">
      <div slot='ext' :class="$style.examine">
        <el-button size="mini" v-has="{action: 'iot:pile:gun:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>editStore()">新增</el-button>
        <el-button size="mini" v-has="{action: 'iot:pile:update', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>updateExtend()">批量编辑扩展信息</el-button>
        <el-button size="mini" v-has="{action: 'iot:ext:view', effect: 'move'}" class="button-offt"  icon="el-icon-s-unfold"  @click="()=>extendList()">扩展信息列表</el-button>
    </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="colOperation" slot-scope="operation">
        <el-popover trigger="click" @hide="cancelPwd" placement="top">
         <div :class="$style.tip">
           <p>名称: {{ operation.row.name }}</p>
          <p>密码: {{ pwd }}</p>
         </div>
          <div slot="reference" class="name-wrapper">
            <div v-has="{action: 'iot:pile:pwd', effect: 'hide'}"  @click="()=>viewPwd(operation.row.id, operation.row.name)"  :class="$style.tag" size="medium">{{ operation.row.name }} <i class="el-icon-view"></i></div>
            
            
          </div>
        </el-popover>
        
      </template>
    <template slot="operation" slot-scope="operation">
          <el-button size="mini" icon="el-icon-edit" 
            v-has="{action: 'iot:pile:gun:update', effect: 'move'}"
            @click="()=>editStore(operation.row.id)"
          >编辑</el-button>
          
          <el-button size="mini" icon="el-icon-edit"
            @click="()=>control(operation.row)"
          >控制枪操作</el-button>
           <el-button size="mini" icon="el-icon-edit"
            v-has="{action: 'gun:control:handle', effect: 'move'}"
            @click="()=>setData(operation.row)"
          >编号</el-button>
          <el-button size="mini"
            v-has="{action: 'iot:pile:pwd:refresh', effect: 'move'}"
            @click="()=>reshPwd(operation.row.sn)"
          >刷新密码</el-button>
          <!-- <el-button size="mini"
            v-has="{action: 'iot:pile:pwd', effect: 'move'}"
            @click="()=>viewPwd(operation.row.id, operation.row.name)"
          >查看密码</el-button> -->
          <el-button size="mini" icon="el-icon-edit"
          v-has="{action: 'iot:pile:update', effect: 'move'}"
            @click="()=>updateExtend(operation.row.id, operation.row.name)"
          >扩展信息</el-button>
          <el-button size="mini" type="danger" icon="el-icon-video-play"
            v-has="{action: 'gun:control:stop', effect: 'move'}"
            :disabled="operation.row.state == 1 ? true:false"
            @click="()=>stopCharge(operation.row.id)"
          >停止充电</el-button>
          <el-button size="mini"  type="danger" icon="el-icon-delete"
            v-has="{action: 'iot:pile:gun:delete', effect: 'move'}"
            @click="()=>remove(operation.row.id)"
          >删除</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
    

    <ModalPanel 
      :visible='visible'
      title="充电枪控制"
      :onCancel="onCancel"
      :class="$style.bannerDialog"
      :onOk="onSubmit">
      <div>
        <div :class="$style.mainBox">
          <div  :class="$style.btnBox"><el-button size="mini" type="primary" @click="controlReset">控制板复位<i class="el-icon-s-tools el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="crashStop">急停<i class="el-icon-switch-button el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="recovery">急停恢复<i class="el-icon-refresh el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="restart">重启<i class="el-icon-refresh-right el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="resume">恢复充电<i class="el-icon-refresh el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="shutdown">关机<i class="el-icon-switch-button el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="stop">停止充电<i class="el-icon-remove-outline el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="suspend">暂停充电<i class="el-icon-video-play el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="timeSync">时间同步<i class="el-icon-time el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="unlock">强制解锁<i class="el-icon-unlock el-icon--right"></i></el-button></div>
          <div :class="$style.btnBox"><el-button size="mini" type="primary" @click="kill">下线</el-button></div>
          <!-- <div :class="$style.btnBox"><el-button size="mini" type="success" @click="editUp('sn_')">设置充电桩编码<i class="el-icon-edit el-icon--right"></i></el-button></div> -->
          <!-- <div :class="$style.btnBox"><el-button size="mini" type="success" @click="editUp('ip_')">设置充电桩IP<i class="el-icon-edit el-icon--right"></i></el-button></div> -->
          <!-- <div :class="$style.btnBox"><el-button size="mini" type="success" @click="editUp('port_')">设置充电桩端口<i class="el-icon-edit el-icon--right"></i></el-button></div> -->
        </div>
      </div>
    </ModalPanel>

    <!-- 修改密码 ---------start-->
    <ModalPanel 
      :visible='passVisible'
      title="添加/编辑"
      :onCancel="onCancelPass"
      :class="$style.bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumnPass'
          :updateData="updateDataPass"
          labelWidth='100px'
          ref="configModal"
          :class="$style.ModifyForm"
          :temporaryData='modalData'>
        </ModifyForm>
      </div>
    </ModalPanel>
    <!-- 修改密码-----------end -->

    <!-- 查看密码---- -->
    <ModalPanel 
      :visible='visible1'
      :showFooter='false'
      title="查看密码"
      :onCancel="onCancel1"
      :class="$style.bannerDialog"
      :onOk="onSubmit">
      <div>
        <div>桩名称： {{names}}</div>
        <div>密码： {{pwd}}</div>
      </div>
    </ModalPanel>
    <!-- 查看密码 -->

    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'iot:pile:gun:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import ModalPanel from "@/components/ModalPanel";
import ModifyForm from "@/components/ModifyForm";
export default {
  name: "qiang",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      visible1:false,
      names: '',
      pwd: '',
      visible:false,
      tableData: [],
      siteList:[],
      pileList:[],
      searchs: {
        component: 'gun',
        site:'',
        pile:'',
        sn: '',
        name: '',
      },
       pager: {
         component: 'gun',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,

      // 修改密码 ---start
      passVisible: false,
      modalData:{},
      editColumnPass:[
        {
          name: "新密码",
          prop: "pwd",
          type: "number",
          width:24,
          required: true
        },
      ]
      //修改密码--end
    };
  },
  created() {
    this.searchsFnc()
    this.getGun();
    this.iotSite()
    if(this.searchs.site){
      this.changeSite(0)
    }
  },
  computed: {
    tableConfig () {
      return {
        selection: false,
        columnConfig: [
           {
            label: "ID",
            type: "text",
            prop: "id",
            align: "center"
          },
          {
            label: "充电枪编号",
            type: "text",
            prop: "sn",
            align: "center"
          },
          {
            label: "名称",
            type: "colOperation",
            prop: "name",
            align: "center"
          },
          {
            label: "设备编码",
            type: "text",
            prop: "deviceSn",
            align: "center"
          },
          {
            label: "状态",
            type: "other",
            prop: "state",
            align: "center",
            fnc: val => val == 1 ? "空闲" : val == 2 ? "已连接" : val == 3 ? "充电中" : val == 4 ? "预约中": val == 5 ? "充电完成未断开":val == 6 ?"故障":'',
            class:val => val == 1 ? "blue-tag" : val == 2 ? "agree" : val == 3 ? "agree" : val == 4 ? "agree": val == 5 ? "denger-tag":val == 6 ?"denger-tag":'',
          },
          {
            label: "在线状态",
            type: "other",
            prop: "online",
            align: "center",
            fnc: val => val == 1 ? "在线" : val == 2 ? "异常" :"离线",
            class:val => val == 1 ? "agree" : val == 2 ? "out-off" : "cancel" 
          },
          // {
          //   label: "地锁状态",
          //   type: "other",
          //   prop: "floorLockState",
          //   align: "center",
          //   fnc: val => val == 0 ? "未知" : val == 1 ? "关闭":"打开"
          // },
          // {
          //   label: "车位编号",
          //   type: "text",
          //   prop: "parkNo",
          //   align: "center"
          // },
          {
            label: "车位状态",
            type: "other",
            prop: "parkState",
            align: "center",
            fnc: val => val == 1 ? "空闲" : val == 2 ? "占用" :"未知"
          },
          // {
          //   label: "额定电流(A)",
          //   type: "text",
          //   prop: "current",
          //   align: "center"
          // },
          // {
          //   label: "额定功率(kw)",
          //   type: "text",
          //   prop: "power",
          //   align: "center"
          // },
          // {
          //   label: "额定电压下限(V)",
          //   type: "text",
          //   prop: "voltageLower",
          //   align: "center"
          // },
          // {
          //   label: "额定电压上限(V)",
          //   type: "text",
          //   prop: "voltageUpper",
          //   align: "center"
          // },
          // {
          //   label: "国家标准",
          //   type: "text",
          //   prop: "nationalStandard",
          //   align: "center"
          // },
          {
            label: "备注",
            type: "text",
            prop: "mark",
            align: "center"
          },
          {
            label: "异常信息",
            type: "text",
            prop: "errorMsg",
            align: "center"
          },
          {
            label: "创建时间",
            type: "text",
            prop: "createTime",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:350
          }
        ].filter(Boolean)
        }
    }
  },
  activated(){
    this.getGun();
  },
  methods: {
    cancelPwd(){
      this.pwd = ''
    },
    onCancel1(){
      this.visible1 = false
    },
    async viewPwd(id ,name){
      let res = await request({
        url: `/iot/pile/gun/pwd/${id}`,
        method: "POST",
        data:  {}
      });
      if(res.code !==0) return
      // this.visible1 = true
      this.names = name
      this.pwd = res.pwd
    },
    async reshPwd(sn){
      let res = await request({
        url: `/iot/pile/gun/pwd/refresh/${sn}`,
        method: "POST",
        data:  {}
        });
         if(res.code !==0) return
       this.$message.success('刷新成功')
    },
    ///
    updateExtend(id, name){
      this.$router.push({ path: "/iot/gun/extend", query: {id, name}})
    },
    extendList(id, name){
      this.$router.push({ path: "/iot/gun/extend/list", query:{id,name}})
    },
    searchsFnc (){
      let searchs = this.$store.getters.searchs
      if(searchs &&searchs.component == 'gun'){
        this.searchs = searchs
      }
      let pager = this.$store.getters.pager
      if(pager &&pager.component == 'gun'){
        this.pager = pager
      }
    },
    async getGun() {
      let  park  = this.searchs.name,  sn = this.searchs.sn,page = this.pager.current,site = this.searchs.site,pile = this.searchs.pile
      let search = objectFilter({park , sn, page, site, pile})
      const res = await request({
        url: "/iot/pile/gun/list",
        method: "POST",
        data:  search
      });
      console.log('res.page.list,',res.page.list)
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
    async changeSite(clear){
      let url = '/iot/pile/select'
      let datas = {siteId:this.searchs.site}
      const res = await request({
                      url,
                      method: "POST",
                      data:datas
                    })
      if(clear){
        this.searchs.pile = ''
      }
      this.pager.current = 1;
      this.pileList = res.list
      this.getGun();
    },
           //站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
       this.siteList = list
    },

    pageChange(val) {
      this.pager.current = val;
      this.getGun();
    },

    changeSearch(key, val) {
      this.searchs[key] = val;
      this.pager.current = 1;
    },

    // 修改密码 -------start
    updatePassVisible(row){
      this.modalData = row
      this.passVisible = true
    },
    async updateDataPass(values){
      // console.log('values',values)
      const {sn, pwd} = values
      let url = '/iot/pile/gun/control/changePwd?sn='+sn+'&pwd='+pwd
      let msg = "修改成功"
      
      let res = await request({
        url: url,
        method: 'POST',
        data: {}
      })
      if(res.code !==0) return
        this.$message.success(msg)
        this.visible = false
        this.getPile();
    },
    onCancelPass(){
      this.passVisible = false
    },
    // 修改密码 ------end
    editStore(id){
      this.$store.commit('saveSearchs', this.searchs)
      this.$store.commit('savePager', this.pager)
      this.$router.push({ path: "/iot/pile/gun/info",query:{id:id} })
    },
    control(row){
      this.sn = row.sn
      this.visible = true
      // this.$store.commit('saveSearchs', this.searchs)
      // this.$store.commit('savePager', this.pager)
      // this.$router.push({ path: "/iot/pile/gun/control",query:{id:row.id, sn: row.sn} })
    },
    setData(row){
      this.$store.commit('saveSearchs', this.searchs)
      this.$store.commit('savePager', this.pager)
      this.$router.push({ path: "/iot/pile/gun/control",query:{id:row.id, sn: row.sn} })
    },
    onCancel(){
      this.visible = false
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
       async controlReset(){
      let res = await request({
        url: "/iot/pile/gun/control/controlReset/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async crashStop(){
      let res = await request({
        url: "/iot/pile/gun/control/crashStop/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async recovery(){
      let res = await request({
        url: "/iot/pile/gun/control/recovery/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async resume(id){
      let res = await request({
        url: "/iot/pile/gun/control/resume/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async restart(){
      let res = await request({
        url: "/iot/pile/gun/control/restart/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async shutdown(){
      let res = await request({
        url: "/iot/pile/gun/control/shutdown/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async stop(){
      let res = await request({
        url: "/iot/pile/gun/control/stop/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async suspend(){
      let res = await request({
        url: "/iot/pile/gun/control/suspend/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async timeSync(){
      let res = await request({
        url: "/iot/pile/gun/control/timeSync/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async unlock(){
      let res = await request({
        url: "/iot/pile/gun/control/unlock/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    async kill(){
      let res = await request({
        url: "/iot/pile/gun/control/kill/"+this.sn,
        method: "GET",
        data: {}
      });
      if ( res.code !== 0) return
      this.$message.success('操作成功')
    },
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let res = await request({
          url: '/iot/pile/gun/delete',
          method: 'POST',
          dataType: 'json',
          data:[id]
        })
        if(res.code !==0) return
        this.$message.success('删除成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.getGun()
      })
    },
    stopCharge(gunSn){
      this.$confirm('确认停止充电吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let res = await request({
          url: '/iot/pile/gun/control/stop/'+gunSn,
          method: 'GET',
        })
        if(res.code !==0) return
        this.$message.success('操作成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.getGun()
      })
  },
  },
  
}
</script>
<style lang='scss' module>
.mainBox {
  display: flex;
  padding: 50px;
  flex-wrap: wrap;
  .btnBox {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
.selectBox {
  margin-right: 20px;
}
.selectBox {
  margin: 4px 0;
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
.tag{
    background-color: #ecf5ff;
    border-color: #d9ecff;
    font-size: 12px;
    color: #409EFF;
    border-radius: 4px;
    max-width: 110px;
    cursor: pointer;
}
.tip{
      background: #e7c3c3;
    border-radius: 4px;
    padding: 18px 7px;
    color: #040404;
}
</style>